<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="姓名">
              <a-input v-model="queryParam.name" placeholder="" />
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <a-form-item label="学号">
              <a-input v-model="queryParam.stdNo" placeholder="" />
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
            >
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus" v-has="'Honor:add'">新增</a-button>
      <a-button
        style="margin-left: 8px"
        type="primary"
        @click="handleApply(false)"
        >申请荣誉奖项</a-button
      >

      <a-dropdown v-if="selectedRowKeys.length > 0" v-has="'Honor:batchdelete'">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel" v-has="'Honor:batchdelete'"
            ><a-icon type="delete" />批量删除</a-menu-item
          >
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
      </a-dropdown>
    </div>

    <s-table
      ref="table"
      :scroll="{ x: 1000 }"
      size="default"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data="loadData"
      @onSelect="onChange"
    >
      <a-space size="middle" slot="action" slot-scope="text, record">
        <a @click="handlePreview(record)">查看</a>
        <a @click="handleEdit(record)" v-has="record.isDirector?'Force':'Honor:edit'">编辑</a>
        <a-popconfirm title="确定删除?" v-has="record.isDirector?'Force':'Honor:delete'" @confirm="() => handleDelete(record.id)">
          <a>删除</a>
        </a-popconfirm>
        <a @click="getProcessImage(record.id)" >流程图</a>
        <a @click="handleDeal(record)" v-if="record.dealFlag">处理</a>
      </a-space>
    </s-table>

    <HonorModal ref="HonorModal" @ok="searchQuery"></HonorModal>

    <!-- 图片预览 -->
    <a-modal :visible="previewVisible" :width="1000" :footer="null" @cancel="previewVisible = false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>

    <!-- 审批面版 -->
    <Approval
      v-model="visible"
      :bizId="mdl.id"
      :businessUrl="url.add"
      detailComponent="HonorForm"
      @ok="searchQuery"
    ></Approval>
    <!-- 查看 -->
    <CheckModal :bizId="detail.id" bizComponent="/honor/modules/HonorForm" :printModel="true" v-model="detail.visible" ref="CheckModal"></CheckModal>
  
  </a-card>
</template>

<script>
import STable from '@/components/table/'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import { axios } from '@/utils/request'
import Approval from '@/components/Approval/Approval'

import HonorModal from './modules/HonorModal'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import { postAction } from '@/api/manage'
import { deleteAction, getAction } from '../../api/manage'
import CheckModal from '@/components/extends/CheckModel'
export default {
  name: 'HonorApply',
  components: {
    CheckModal,
    AInput,
    ATextarea,
    STable,
    Approval,
    HonorModal
  },
  mixins: [DisabledAuthFilterMixin],
  data() {
    const statuMap = {
      0: '未提交',
      1: '已提交',
      2: '已完成'
    }
    return {
      detail:{},
      url: {
        add: 'gloryApply/add',
        list: 'gloryApply/list',
        delete: 'gloryApply/delete',
        deleteBatch: 'gloryApply/deleteBatch'
      },
      visibleCreateModal: false,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      form: null,
      mdl: {},
      previewImage:'',
      previewVisible:false,

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        title: '',
        status: 0,
        waitUserId: this.$store.getters.userInfo.id
      },
      // 表头
      columns: [
        {
          title: '年度',
          align: 'center',
          dataIndex: 'period',
          width: '120px',
          // customRender: (text, record, index) => {
          //   //字典值替换通用方法
          //   return text.slice(0,4) + '年'
          // }
        },
        {
          title: '申报奖项',
          align: 'center',
          dataIndex: 'glory_dictText',
          width: '250px',
          ellipsis: true
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'name',
          width: '150px'
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex_dictText',
          width: '150px'
        },
        {
          title: '学号',
          align: 'center',
          dataIndex: 'stdNo',
          width: '150px'
        },
        {
          title: '第一学期GPA',
          align: 'center',
          dataIndex: 'gpaA',
          width: '250px',
          ellipsis: true
        },
        {
          title: '第二学期GPA',
          align: 'center',
          dataIndex: 'gpaB',
          width: '250px',
          ellipsis: true
        },
        {
          title: '学院',
          align: 'center',
          width: 100,
          dataIndex: 'college'
        },
        {
          title: '专业',
          align: 'center',
          width: 150,
          dataIndex: 'major'
        },
        {
          title: '年级',
          align: 'center',
          width: 100,
          dataIndex: 'grade'
        },
        {
          title: '班级',
          align: 'center',
          width: 100,
          dataIndex: 'clazz'
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'createTime',
          width: '250px'
        },
        {
          title: '操作',
          align: 'center',
          fixed: 'right',
          width: '250px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        let params = Object.assign({}, parameter, this.queryParam)
        params.title = params.title && `*${params.title}*`
        return getAction(this.url.list, params).then(res => {
          const obj = {
            data: res.result.records || [],
            pageNo: res.result.current,
            pageSize: res.result.size,
            totalCount: res.result.total,
            totalPage: res.result.page,
            sortColumns: res.result.sortColumns
          }
          return obj
        })
      },

      selectedRowKeys: [],
      selectedRows: []
    }
  },
  created() {},
  methods: {
    getProcessImage(id){
      axios.get('/workflow/showProcessImageByBizId',{
        params:{
          bizId:id
        },
        responseType:'blob'
      }).then(data=>{
        this.previewImage = URL.createObjectURL(data);
        this.previewVisible = true
      })
    },
    handleAdd() {
      this.$refs.HonorModal.title = '添加荣誉奖项'
      this.$refs.HonorModal.add({})
    },
    handleApply(flag) {
      this.$refs.HonorModal.title = '申请荣誉奖项'
      let data = {}
      if (!flag) data['creatorId'] = this.$store.getters.userInfo.id
      this.$refs.HonorModal.apply(data, {
        creatorId: !flag
      })
    },
    handleEdit(record) {
      this.$refs.HonorModal.title = '编辑荣誉奖项'
      this.$refs.HonorModal.edit(record)
    },
    handleDelete(id) {
      deleteAction(this.url.delete, { id }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.searchQuery()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    batchDel: function() {
      if (!this.url.deleteBatch) {
        this.$message.error('请设置api.leteBatch属性!')
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      } else {
        var ids = ''
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ','
        }
        var that = this
        this.$confirm({
          title: '确认删除',
          content: '是否删除选中数据?',
          onOk: function() {
            that.loading = true
            deleteAction(that.url.deleteBatch, { ids: ids })
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.selectedRowKeys = []
                  that.selectionRows = []
                  that.searchQuery()
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.loading = false
              })
          }
        })
      }
    },
    handlePreview(record) {
      // this.$refs.HonorModal.title = '查看荣誉奖项'
      // this.$refs.HonorModal.review(record)

      this.detail = record
      this.$set(this.detail,'visible',true)
    },
    searchQuery() {
      this.$nextTick(() => {
        this.$refs.table.refresh()
      })
    },
    /**
     * 处理
     */
    handleDeal(record) {
      this.mdl = Object.assign({}, record)
      this.visible = true
    },
    /**
     * 批量通过
     */
    batchApprove(flag) {
      let self = this
      this.$confirm({
        title: '确认审批',
        content: '是否通过选中数据?',
        onOk: function() {
          let params = {
            bizId: self.selectedRowKeys,
            dealResult: flag ? 1 : 0
          }
          postAction('/workflow/batchSubmitTask', params).then(res => {
            if (res.success) {
              self.$message.success(res.message)
            } else {
              self.$message.warning(res.message)
            }
            self.searchQuery()
            self.onClearSelected()
          })
        }
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    onClearSelected() {
      this.$nextTick(() => {
        this.selectedRowKeys = []
        this.selectionRows = []
      })
    },
    //添加逻辑
    handleModalVisible(isVisible) {
      this.visibleCreateModal = isVisible
    },

    onChange(row) {
      this.selectedRowKeys = row.selectedRowKeys
      this.selectedRows = row.selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },

    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
        waitUserId: this.$store.getters.userInfo.id
      }
      this.searchQuery()
    }
  }
}
</script>
